<template>
	<div class="system-role-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :inline="true">
					<!-- <el-form-item label="角色名称">
            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
          </el-form-item> -->
					<el-form-item label="筛选">
						<el-tree-select v-model="value" :data="data" filterable />
					</el-form-item>
					<el-form-item :label="value == null ? '请选择' : data[value].label">
						<el-input
							v-model="tableData.queryParams.title"
							:placeholder="value == null ? '请输入内容' : '请输入' + data[value].label"
							clearable
							class="w-50 m-2"
							size="default"
							@input="keywordChange($event)"
						/>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="roleList">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增银行卡绑定
						</el-button>
						<el-button size="default" type="primary" class="ml10" @click="Refresh">
							<!-- <el-icon><Refresh /></el-icon> -->
							刷新页面
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%">
				<el-table-column fixed prop="id" label="ID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ownerName" label="用户名"></el-table-column>
				<el-table-column prop="bankAddress" label="所属银行" show-overflow-tooltip></el-table-column>
				<el-table-column prop="cardNo" label="银行卡号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="bankType" label="支行名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ownerName" label="姓名/协议" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updatedAt" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="300">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
							><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="roleList"
      />
		</el-card>
		<!-- <EditRole ref="editRoleRef" @getRoleList="roleList"/> -->
		<MemberListadd ref="editRoleRef" @getRoleList="roleList" />
		<Adjusting_Balance ref="Adjusting" @getRoleList="roleList" />
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
import MemberListadd from './component/berListadd.vue';
import Adjusting_Balance from './component/Adjusting_balance.vue';
import {apiBankCardList} from '/@/api/MemberManagement/apiMemberBankcardbinding';

// 定义接口来定义对象的类型
interface TableData {
	id: number;
	userId: string;
	cardNo: string;
	bankType: string;
	phone: string;
	ownerName: string;
	bankAddress: string;
	remark: string;
	createdAt: string;
	updatedAt: string;
	state: boolean;
	Game_balance: number;
}

interface TableDataState {
	tableData: {
		queryParams: {
			title: string;
			component: string;
		};
		sourceData: Array<sourceDataff>;
		data: Array<TableData>;
		total: number;
		loading: boolean;
		param: {
			roleName: string;
			roleStatus: string;
			pageNum: number;
			pageSize: number;
		};
	};
}
interface sourceDataff {
	value: string;
	label: string;
}
export default defineComponent({
	name: 'apiV1SystemRoleList',
	components: { MemberListadd, Adjusting_Balance },
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const addRoleRef = ref();
		const editRoleRef = ref();
		const Adjusting = ref();
		const dataScopeRef = ref();

		const state = reactive<TableDataState>({
			tableData: {
				queryParams: {
					title: '',
					component: '',
				},
				data: [],
				sourceData: [
					{ value: '0', label: 'ID' },
					{ value: '1', label: '用户名' },
				],
				total: 0,
				loading: false,
				param: {
					roleName: '',
					roleStatus: '',
					pageNum: 1,
					pageSize: 10,
				},
			},
		});
		const value = ref();
		const data = ref(state.tableData.sourceData);
		//筛选文本框
		const keywordChange = (keywords: any) => {
		};
		//筛选方法
		const filterable = (value: any) => {

		};
		// 初始化表格数据
		const apiinitTableData = () => {
			apiroleList();
		};
		// 初始化表格数据
		const apiroleList = () => {
			apiBankCardList(state.tableData.param).then((res) => {
				const list = res.data.list ?? [];
				const data: Array<TableData> = [];
				list.map((item: TableData) => {
					data.push({
						id: item.id,
						userId:item.userId,
						cardNo:item.cardNo,
						bankType:item.bankType,
						ownerName:item.ownerName,
						phone:item.phone,
						bankAddress:item.bankAddress,
						createdAt: item.createdAt,
						remark: item.remark,
						updatedAt: item.updatedAt,
						state: item.state ,
						Game_balance:item.Game_balance,
					});
				});
				state.tableData.data = data;
				state.tableData.total = res.data.total;
			}); 
		};
		// 打开新增角色弹窗
		const onOpenAddRole = () => {
			editRoleRef.value.openDialog();
		};
		// 打开修改角色弹窗
		const onOpenEditRole = (row: Object) => {
			editRoleRef.value.openDialog(toRaw(row));
		};
		// 调整余额
		const Adjusting_Balanceaon = () => {
			Adjusting.value.openDialoga();
		};
		// 删除角色
		// const onRowDel = (row: any) => {
		// 	ElMessageBox.confirm(`此操作将永久删除角色为：“${row.ownerName}”的银行卡信息，是否继续?`, '提示', {
		// 		confirmButtonText: '确认',
		// 		cancelButtonText: '取消',
		// 		type: 'warning',
		// 	})
		// 		.then(() => {
		// 			apideleteBankCardList(row.id).then(() => {
		// 				ElMessage.success('删除成功');
		// 				proxy.$refs['editRoleRef'].resetMenuSession();
		// 				apiroleList();
		// 			});
		// 		})
		// 		.catch(() => {});
		// };
		// 刷新页面
		const Refresh = () => {
			apiinitTableData(); 
		};

		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
		};
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
		};
		// 页面加载时
		onMounted(() => {
			apiinitTableData(); //页面进入渲染
		});

		return {
			apiinitTableData,
			value,
			Adjusting,
			addRoleRef,
			editRoleRef,
			dataScopeRef,
			onOpenAddRole,
			onOpenEditRole,
			onHandleSizeChange,
			onHandleCurrentChange,
			Refresh,
			Adjusting_Balanceaon,
			...toRefs(state),
			keywordChange,
			filterable,
			data,
		};
	},
});
</script>
